<h1 mat-dialog-title>
  {{ title ? title : ('Loading' | translate) }}
</h1>
<mat-dialog-content class="job-dialog">
  @if (showRealtimeLogs && realtimeLogs) {
    <div class="logs-container">
      <h5>{{ 'Logs' | translate }}</h5>
      <pre #logs class="message logs">{{ realtimeLogs | translate }}</pre>
    </div>
  }

  @if (isJobRunning) {
    <div>
      <div class="description-line">
        <span>{{ job.description ? job.description : job.method }}</span>
        @if (!hideProgressValue) {
          <small>
            {{ progressTotalPercent || 0 | number: '1.2-2' }}%
          </small>
        }
      </div>
      <mat-progress-bar
        color="primary"
        class="job-progress job-running"
        [value]="progressTotalPercent"
        [mode]="progressTotalPercent ? 'determinate' : 'indeterminate'"
      ></mat-progress-bar>
    </div>
  }

  @if (!isJobStateDeterminate) {
    <div>
      <mat-progress-bar
        color="primary"
        class="job-progress job-ended"
        [mode]="'indeterminate'"
      ></mat-progress-bar>
    </div>
  }

  @if (description) {
    <div
      class="job-description"
      [innerHTML]="description"
    ></div>
  }

  @if (!description && !job) {
    <div>
      <mat-progress-bar
        color="primary"
        mode="indeterminate"
        class="job-progress"
      >
      </mat-progress-bar>
    </div>
  }

</mat-dialog-content>

<div mat-dialog-actions>
  @if (hasAbortButton) {
    <button
      mat-button
      ixTest="abort"
      [disabled]="isAbortingJob"
      [attr.aria-label]="'Abort Job' | translate"
      (click)="abortJob()"
    >
      {{ isAbortingJob ? ('Aborting...' | translate) : ('Abort' | translate) }}
    </button>
  }

  @if (showMinimizeButton) {
    <button
      class="mat-dialog-close"
      mat-icon-button
      mat-dialog-close="close"
      ixTest="close"
      [aria-label]="'Hide Job' | translate: { jobMethod: job.method }"
    >
      <ix-icon name="remove"></ix-icon>
    </button>
  }
</div>
